<style>
    .mobile-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 50px;
        background: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .bar-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #666;
        font-size: 12px;
        text-decoration: none;
        padding: 5px 0;
    }

    .bar-item.active {
        color: #FF2442;
    }

    .bar-icon {
        font-size: 20px;
        margin-bottom: 2px;
    }

    /* 添加红点样式 */
    .bar-item .badge {
        position: relative;
    }

    .bar-item .badge::after {
        content: '';
        position: absolute;
        top: -2px;
        right: -8px;
        width: 16px;
        height: 16px;
        background: #FF2442;
        border-radius: 50%;
        font-size: 10px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 适配底部安全区域 */
    @supports (padding-bottom: env(safe-area-inset-bottom)) {
        .mobile-bar {
            padding-bottom: env(safe-area-inset-bottom);
            height: calc(50px + env(safe-area-inset-bottom));
        }
    }

    /* 中间的加号按钮 */
    .add-button {
        width: 40px;
        height: 40px;
        background: #FF2442;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
        margin-top: -15px;
        box-shadow: 0 2px 8px rgba(255,36,66,0.3);
    }
</style>

<div class="mobile-bar">
    <a href="/web/index/" class="bar-item">
        <span class="bar-icon">🏠</span>
        <span>首页</span>
    </a>
    <!-- <a href="javascript:;" class="bar-item">
        <span class="bar-icon">🛒</span>
        <span>购物</span>
    </a>
    <a href="javascript:;" class="bar-item">
        <div class="add-button">+</div>
    </a>
    <a href="javascript:;" class="bar-item">
        <span class="bar-icon badge">💬</span>
        <span>消息</span>
    </a> -->
    <a href="/web/me/" class="bar-item">
        <span class="bar-icon">👤</span>
        <span>我</span>
    </a>
</div>
<script>
    function goToFeature(feature) {
        window.location.href = feature;
    }
</script>